//主布局界面左侧菜单

import React from 'react';
import MenuItem from "./Item";
import "./index.css";

export default class LeftMenu extends React.Component{
    constructor (props){
        super();
        let menu=[];
        for(let i=0;i<props.data.length;i++){
            menu.push(<MenuItem key={i} selectIndex={props.selectIndex} id={"Menu_"+i} titleClass="LeftMenu_Item_Title" data={props.data[i]}  generate={e=>this.reDraw(e)}/>);
        }
        this.state={
            data:props.data,
            menu:menu,
            // ChangeHeight:props.change
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        let menu=[];
        for(let i=0;i<props.data.length;i++){
            menu.push(<MenuItem key={i} selectIndex={props.selectIndex} id={"Menu_"+i} titleClass="LeftMenu_Item_Title" data={props.data[i]}  generate={e=>this.reDraw(e)}/>);
        }
        this.setState({
            data:props.data,
            menu:menu,
            // ChangeHeight:props.change
        })
    }
    reDraw(id){
        let selectTitle="LeftMenu_Item_Title_Selected";
        let selectData=document.getElementsByClassName(selectTitle);
        for(let i=0;i<selectData.length;i++){
            if(selectData[i].id!==id){
                let className=selectData[i].className;
                className=className.replace(selectTitle,"");
                selectData[i].className=className;
            }
        }
        let selectNode=document.getElementById(id);
        selectNode.className=selectNode.className+" "+selectTitle;

        let svgs=document.getElementsByClassName("Menu_SVG");
        for(let i=0;i<svgs.length;i++){
            svgs[i].setAttribute("fill","#333");
        }
        let selectSVG=document.getElementById(id+"_svg");
        if(selectSVG!==undefined && selectSVG!==null){
            selectSVG.setAttribute("fill","#5393EB")
        }
    }
    render(){
        return(
            <div className="Layout_LeftMenu">
                {this.state.menu}
            </div>
        );
    }
}
